<template>
	<view class="shop_boxs" @click="$gourl('/pages/index/shopDetails?id='+shopData.item_id)">
		<image :src="shopData.pics[0]" mode=""></image>
		<view class="shop_info">
			<view class="shop_title">
				{{shopData.item_name?shopData.item_name:''}}
			</view>
			<!-- <view class="tag_box">
				<view class="tag">我是标签</view>
			</view> -->
			<view class="shop_price">
				<text class="red">￥</text>
				<text class="big red">{{Number(shopData.price/100).toFixed(2)}}</text>
				<text class="line">￥{{Number(shopData.market_price/100).toFixed(2)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['shopData'],
		data() {
			return {

			}
		}
	}
</script>

<style scoped lang="scss">
	.shop_boxs {
		width: 330rpx;
		background: #fff;
		border: 1px solid #eee;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.shop_price {
			display: flex;
			position: relative;
			flex-direction: row;
			justify-content: flex-start;
			align-items: baseline;
			line-height: 32rpx;
			margin: 8rpx 0 0 0;
			// font-weight: bold;
			color: #bbb;
			font-size: 24rpx;

			.red {
				color: #fa4126;
			}

			.big {
				font-size: 28rpx;
			}

			.line {
				text-decoration: line-through;
			}
		}

		// .tag_box {
		// 	display: flex;
		// 	flex-direction: row;
		// 	flex-wrap: wrap;
		// 	margin: 8rpx 0 0 0;

		// 	.tag {
		// 		color: #fa4126;
		// 		background: transparent;
		// 		font-size: 20rpx;
		// 		border: 1rpx solid #fa4126;
		// 		padding: 0 8rpx;
		// 		border-radius: 16rpx;
		// 		line-height: 30rpx;
		// 		margin: 0 8rpx 8rpx 0;
		// 		display: block;
		// 		overflow: hidden;
		// 		white-space: nowrap;
		// 		word-break: keep-all;
		// 		text-overflow: ellipsis;
		// 	}
		// }

		image {
			width: 330rpx;
			height: 330rpx;
		}

		.shop_info {
			display: flex;
			flex: 1 1 auto;
			background: #fff;
			border-radius: 0 0 16rpx 16rpx;
			padding: 16rpx 20rpx 18rpx 20rpx;
			flex-direction: column;
		}

		.shop_title {
			flex-shrink: 0;
			font-size: 28rpx;
			color: #333;
			font-weight: 400;
			display: -webkit-box;
			height: 72rpx;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			word-break: break-word;
			line-height: 36rpx;
		}
	}
</style>